import draw from './draw';
import util from './util';
import Hammer from './libs/hammer.js';
// const Hammer = window.Hammer;

class cTable {
    constructor(opt) {
        this.el = document.querySelector(opt.el);
        this.ctx = this.el.getContext('2d');
        this.width = this.el.width;
        this.height = this.el.height;
        this.data = opt.data;
        this.oData = JSON.parse(JSON.stringify(opt.data));
        this.scale = 1;
        this.dataHeight = 0;
        this.dataWidth = 0;

        for(let i = 0; i < this.data.length; i++){
            this.dataHeight += this.data[i][0].height;
        }
        for(let i = 0; i < this.data[0].length; i++){
            this.dataWidth += this.data[0][i].width;
        }
        this.left = 0;
        this.top = 0;
        this.minLeft = this.width - this.dataWidth;
        this.minTop = this.height - this.dataHeight;
        console.log(this.dataWidth, this.dataHeight, this.minLeft, this.minTop);
    }

    render() {
        // let width = 0;
        // let height = 0;
        console.log(this.width, this.height);

        // for (let i = 0; i < this.data.length; i++) {
        //     draw.fillRect(this.ctx, this.data[i]);
        //     draw.strokeRect(this.ctx, this.data[i]);
        //     draw.fillText(this.ctx, this.data[i]);
        //     // console.log(this.data[i]);
        //     width += this.data[i].width;
        //     height += this.data[i].height;
        // }
        this.draw(0, 0);
        this.el.addEventListener('click', (e) => {
            // console.log(e);
            console.log(`clientX: ${e.clientX}; clientY: ${e.clientY}; offsetX: ${e.offsetX}; offsetY: ${e.offsetY}`);
        });
        // let sx = 0;
        // let sy = 0;
        // this.el.addEventListener('touchstart', (e) => {
        //     e.preventDefault();
        //     // console.log(e);
        //     sx = e.touches[0].clientX;
        //     sy = e.touches[0].clientY;
        // });
        // this.el.addEventListener('touchmove', (e) => {
        //     e.preventDefault();
        //     // console.log(e);
        //     const ex = e.touches[0].clientX;
        //     const ey = e.touches[0].clientY;
        //     // requestAnimationFrame(this.draw.bind(this, ex - sx, ey - sy));
        //     // this.ctx.save();
        //     this.ctx.translate(ex - sx, ey - sy);
        //     // this.draw(ex - sx, ey - sy);
        //     this.draw(0,0);
        //     // this.ctx.restore();
        //     sx = ex;
        //     sy = ey;
        // });

        const myElement = document.getElementById('can');

        const mc = new Hammer.Manager(myElement);

        // create a pinch and rotate recognizer
        // these require 2 pointers
        const pinch = new Hammer.Pinch();
        const tap = new Hammer.Tap();
        const pan = new Hammer.Pan();

        // add to the Manager
        mc.add([pinch,tap, pan]);


        mc.on('pinch', (ev) => {
            this.scale = 1;
            console.log(ev);
            if(ev.scale > 1){
                this.scale += ev.scale / 100;
            }else{
                this.scale -= ev.scale;
            }
            if(this.scale < 1){
                this.scale = 1;
            }
            // this.ctx.save();
            this.ctx.scale(this.scale, this.scale);
            // this.ctx.restore();
        });
        mc.on('tap', (ev) => {
            console.log(ev);
            document.querySelector('#content').innerHTML = ev;
        });
        let sx = 0;
        let sy = 0;
        mc.on('pan', (e) => {
            console.log(e);
            const x = e.deltaX - sx;
            const y = e.deltaY - sy;
            sx = e.deltaX;
            sy = e.deltaY;
            const pos = this.edge(x, y);
            // this.ctx.translate(x, y);
            this.left += pos.x;
            this.top += pos.y;
            console.log(pos, this.left, this.top);
            this.ctx.translate(pos.x, pos.y);
            this.clearAll();
            this.draw(0,0);
        });
        mc.on('panend', (e) => {
            sx = 0;
            sy = 0;
        });
        // top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
        // this.data[0].textAlign = 'start';
        // this.data[0].textBaseline = 'hanging';
        // draw.fillRect(this.ctx, this.data[0]);
        // draw.strokeRect(this.ctx, this.data[0]);
        // draw.fillText(this.ctx, this.data[0]);
        // console.log(this.data[0]);
    }
    edge(x, y){
        // const minLeft = this.width - this.dataWidth;
        // const minTop = this.height - this.dataHeight;
        const cacheX = this.left + x;
        const cacheY = this.top + y;
        let rx = x;
        let ry = y;
        if(cacheX > 0){
            rx = -this.left;
        }
        if(cacheX < this.minLeft){
            rx = -(this.dataWidth - (-this.left) - this.width);
        }
        if(cacheY > 0){
            ry = -this.top;
        }
        if(cacheY < this.minTop){
            ry = -(this.dataHeight - (-this.top) - this.height);
        }
        return {x: rx, y: ry};
    }
    draw(oX, oY) {
        this.clearAll();
        let offsetX = oX;
        let offsetY = oY;
        console.log(offsetX, offsetY);
        // const data = JSON.parse(JSON.stringify(this.data));
        const data = this.data;
        const firstCellX = data[0].x + offsetX;
        const firstCellY = data[0].y + offsetY;
        const lastCellX = data[data.length - 1].x + offsetX;
        const lastCellY = data[data.length - 1].y + offsetY;
        if(firstCellX > 0){
            offsetX = -data[0].x;
        }
        if(firstCellY > 0){
            offsetY = -data[0].y;
        }
        if(lastCellX < this.width){
            offsetX = this.width - data[data.length - 1].x - data[data.length - 1].width;
        }
        if(lastCellY < this.height){
            offsetY = this.height - data[data.length - 1].y - data[data.length - 1].height;
        }
        for (let i = 0; i < data.length; i++) {
            for(let j = 0; j < data[i].length; j++){
                data[i][j].x += offsetX;
                data[i][j].y += offsetY;
                draw.fillRect(this.ctx, data[i][j]);
                draw.strokeRect(this.ctx, data[i][j]);
                draw.fillText(this.ctx, data[i][j]);
            }
            // console.log(this.data[i]);
        }
        // console.log(this.data);
    }
    clearAll() {
        draw.clear(this.ctx, 0, 0, this.width, this.height);
    }
}

window.cTable = cTable;
